<template>
  <div class="content">
    <div class="warp">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">媒介结构设置</el-menu-item>

        <el-menu-item index="2">字段设置</el-menu-item>
      </el-menu>
      <div class="line" v-if="activeIndex==1">
        <div class="headers">
          <el-button type="primary" @click.native="addMJshow">
            <i class="el-icon-plus"></i>新建媒介
          </el-button>
          <div class="left">
            <p>关键字</p>
             <el-select v-model="SearchWord" filterable  style="width:300px;margin-left:30px;margin-right:30px;" placeholder="请选择">
            <el-option
            
              v-for="item in table_list"
              :key="item.table_name"
              :label="item.name"
              :value="item.table_name">
            </el-option>
          </el-select>
            <!-- <el-input style="width:300px;margin-left:30px;margin-right:30px;" v-model="SearchWord"></el-input> -->
            <el-button type="primary" icon="el-icon-search" @click.native="seachmia">搜索</el-button>
          </div>
        </div>
        <el-table :data="medialist" border style="width: 100%">
          <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
          <el-table-column prop="medium_name" label="媒介" align="center" width="120"></el-table-column>
          <el-table-column prop="name" align="center" label="字段" width="216"></el-table-column>
          <!-- <el-table-column align="center" label="是否统计字段" width="120">
            <template slot-scope="scope">
              <span>{{scope.is_ton==1?'是' : '否'}}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="get_pretect" align="center" label="维护人员" width="120"></el-table-column>
          <el-table-column prop="remark" align="center" label="说明"></el-table-column>
          <el-table-column prop="created_at" align="center" label="创建日期" ></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="editMJ(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="mediapage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="mediasize"
          ></el-pagination>
        </div>
      </div>
      <div class="line" v-if="activeIndex==2">
        <div class="headers">
          <el-button type="primary" @click.native="addfield">
            <i class="el-icon-plus"></i>新建字段
          </el-button>
          <div class="left">
            <p>关键字</p>
            <el-input v-model="fieldname" style="width:300px;margin-left:30px;margin-right:30px;"></el-input>
            <el-button @click.native="seachfield" type="primary" icon="el-icon-search">搜索</el-button>
          </div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>

          <el-table-column align="center" prop="field" label="字段" ></el-table-column>
          <el-table-column align="center" prop="name" label="名称" ></el-table-column>
          <el-table-column align="center" prop="class" label="类型" ></el-table-column>
          <el-table-column align="center" prop="long" label="长度" ></el-table-column>
          <el-table-column align="center" prop="forgen_field" label="关联字段"></el-table-column>
          <el-table-column align="center" prop="input_class" label="输入类型" width="100"></el-table-column>
          <el-table-column align="center" prop="condition" label="条件" ></el-table-column>
          <el-table-column align="center"  label="基本字段" width="100">
            <template slot-scope="scope">
              <span>{{scope.base_field==1?'是':'否'}}</span>  
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="备注" width="100"></el-table-column>
          <el-table-column align="center" prop="created_at" label="创建日期" width="120"></el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <!-- <el-button @click="editfield(scope.row)" type="text" size="small">编辑</el-button> -->
              <el-button type="text" @click="c(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="changepagefiled"
            :current-page.sync="fieldpage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="allfield"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="prop" v-show="addstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="height:480px;">
        <div class="propheader">
          {{mediatitle}}
          <!-- <p >关闭</p> -->
          <el-button @click.native="setstatus" class="close1" type="text">关闭</el-button>
        </div>
        <div class="info">
          <div class="topinfo">
            <p>媒介名称</p>
            <el-input placeholder="媒介名称" v-model="mj_name"></el-input>
          </div>
           <div class="topinfo">
            <p>英文名称</p>
            <el-input placeholder="媒介英文名称" @input="CHANGENAME" v-model="media_en"></el-input>
          </div>
          <div class="infoitems">
            <div class="title">字段选择</div>
            <div class="select">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
              >全选</el-checkbox>
              <!-- <div style="margin: 15px 0;"></div> -->
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox
                  v-for="(item,index) in m_fieldlist"
                  :label="item.id"
                  :key="index"
                >{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- <div class="infoitems">
            <div class="title" style="margin-top:20px;">价格字段选择</div>
            <div class="select">
              <el-radio v-model="radio" label="1">长度、数量、价格</el-radio>
              <el-radio v-model="radio" label="2">时间、长度、数量、价格、限定行业、共享</el-radio>
            </div>
          </div>-->
          <div class="closeand">
            <el-button type="primary" @click="addMJ">保存</el-button>
            <el-button type="primary" @click.native="setstatus">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- field -->
    <div class="prop" v-show="field">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:700px;">
        <div class="propheader">
          {{fieldtitle}}
          <!-- <p >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setfield">关闭</el-button>
        </div>
        <div class="infolist">
          <div class="infoitem">
            <div class="itemname">字段</div>
            <el-input style="width:200px;" @input="inputPhone" v-model="addfieldparam.field"></el-input>
          </div>
          <div class="infoitem">
            <div class="itemname">字段名称</div>
            <el-input v-model="addfieldparam.name" style="width:200px;"></el-input>
          </div>
          <div class="infoitem">
            <div class="itemname">类型</div>
            <el-select v-model="addfieldparam.class" filterable placeholder="请选择">
              <el-option
                v-for="item in typelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="infoitem">
            <div class="itemname">长度</div>
            <el-input v-model="addfieldparam.long" type="number" style="width:200px;"></el-input>
          </div>
          <div class="infoitem">
            <div class="itemname">基本字段</div>
            <el-select v-model="addfieldparam.base_field"  placeholder="请选择">
              <el-option
                v-for="item in statuslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="infoitem">
            <div class="itemname">输入类型</div>
            <el-select v-model="addfieldparam.type" filterable placeholder="请选择">
              <el-option
                v-for="item in inputtypelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="infoitem">
            <div class="itemname">条件</div>
            <el-input style="width:200px;" v-model="addfieldparam.condition"></el-input>
          </div>
          <div class="infoitem" v-if="addfieldparam.type==2">
            <div class="itemname">关联字段</div>
            <!-- <el-input v-model="addfieldparam.forgen_field" style="width:200px;"></el-input> -->
            <el-select  v-model="addfieldparam.forgen_field" style="width:200px;" filterable placeholder="请选择">
              <el-option
                v-for="item in gg_list"
                :key="item.id"
                :label="item.class"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="betext">
          <div class="textname">备注</div>
          <el-input
            type="textarea"
            :rows="2"
            v-model="addfieldparam.remark"
            placeholder="请输入内容"
            style="width:400px;"
          ></el-input>
        </div>
        <div class="closeand">
          <el-button type="primary" @click.native="fieldsave">保存</el-button>
          <el-button type="primary" @click.native="setfield">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mediaList,forgen_field, getmediaINFO,editsavemedia, SETDATE, fieldList,setFieldInfo, addMedia,addField,getFieldinfo } from "@/api/System.js";

export default {
  data() {
    return {
      table_list:[],
      mediatitle: "新建媒介",
      MJ_type:1,
      //媒介名字
      mj_name: "",
      media_en:'',
      //添加媒介时列表
      m_fieldlist: [],
      //添加字段状态
      field: false,
      sizestatus: "",
      typelist: [
        {
          value: "int",
          label: "int"
        },
       
        {
          value: "varchar",
          label: "varchar"
        },
        {
          value: "text",
          label: "text"
        }
      ],
      inputtypelist: [
        {
          value: "1",
          label: "输入框"
        },
        {
          value: "2",
          label: "下拉框"
        },
        {
          value: "3",
          label: "单选框"
        },
        {
          value: "4",
          label: "时段"
        },
        {
          value: "5",
          label: "文本"
        },
        {
          value: "6",
          label: "周期选择"
        },
        {
          value: "7",
          label: "日期选择"
        },
        {
          value: "8",
          label: "日期范围"
        },
        {
          value: "9",
          label: "广告或图片类"
        },
        {
          value: "10",
          label: "文件上传"
        },
         {
          value: "11",
          label: "组合输入"
        }
      ],
      statuslist: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "2",
          label: "否"
        }
      ],
      addstatus: false,
      radio: "1",
      checkAll: false,
      //多选是选中的id列表
      checkedCities: [],
      // cities: cityOptions,
      isIndeterminate: true,
      //媒介当前页
      mediapage: 1,
      //媒介列表总条数
      mediasize: 0,
      activeIndex: "1",
      SearchWord: "",
      //媒介列表
      medialist: [],
      //字段页数
      fieldpage: 1,
      //字段搜索关键字
      fieldname: "",
      //字段总条数
      allfield: 0,
      //
      fieldtype:1,
      //标题
      fieldtitle: "添加字段",
      tableData: [],
      addfieldparam: {
        field: "",
        name: "",
        class: "",
        long: "",
        forgen_field: "",
        type: "",
        base_field: "",
        condition: "",
        remark:''
      },
      //字段id
      fieldID:'',
      Media_id:'',
      gg_list:[],
      createdSATATUS:true
    };
  },
  created() {
    this.getmediaList();
    this.setlist();
    this.getfieldList();
    this.getforgen_field()
  },
  watch: {
    SearchWord:function(){
    //  console.log(this.SearchWord)
    //  this.mediapage=1
    //  this.getmediaList()
    },
  },
  methods: {
    //获取关联
    getforgen_field(){
      forgen_field().then(res=>{
        if(res.code==200){
        this.gg_list=res.data
        }
      })
    },
    //获取媒介详细信息
    
    editMJ(row){
      this.Media_id=row.medium_id
      this.mediatitle = "编辑媒介";
this.MJ_type=2
      this.setstatus();
    getmediaINFO({id:row.medium_id}).then(res=>{
      console.log(res)
      if(res.code==200){
        this.mj_name=res.data.table.name
        this.media_en=res.data.table.table_name
        this.checkedCities=[]
        res.data.info.forEach(element => {
          this.checkedCities.push(element.id)
        });
      }
    })
    },
    //媒介名称正则
    CHANGENAME(e){
    // this.addfieldparam.field = '';   //验证输入的提示信息
    // return
    var regex=/(^_([a-z]_?)*$)|(^[a-z](_?[a-z])*_?$)/
    let filtered = regex.test(e)
    if(!filtered){
      this.$message({
        message:'字段名称只能是小写字母和下滑线',
        type:'warning'
      })
      // this.media_en=e.substring(0, e.length - 1)
      this.media_en=''
     
    }
    },
    //正则添加字段

    inputPhone(e){
    // this.addfieldparam.field = '';   //验证输入的提示信息
    // return
    var regex=/(^_([a-z]_?)*$)|(^[a-z](_?[a-z])*_?$)/
    let filtered = regex.test(e)
    if(!filtered){
      this.$message({
        message:'字段名称只能是小写字母和下滑线',
        type:'warning'
      })
      // this.addfieldparam.field=e.substring(0, e.length - 1)
      this.addfieldparam.field=''
     
    }
    // console.log(this.phone.length,this.phone,e)
},
    //编辑字段
    editfield(row){
      // console.log(row)
      this.fieldtitle='编辑'
      this.fieldtype=2
      this.fieldID=row.id
      getFieldinfo(row.id).then(res=>{
        if(res.code==200){
          this.addfieldparam.field=res.data.field
          this.addfieldparam.name=res.data.name
          this.addfieldparam.class=res.data.class
          this.addfieldparam.long=res.data.long
          this.addfieldparam.forgen_field=res.data.forgen_field
          this.addfieldparam.input_class=res.data.input_class
          this.addfieldparam.condition=res.data.condition
          // this.addfieldparam.base_field=res.data.base_field
          this.addfieldparam.remark=res.data.remark
          this.setfield()
        }
      })
    },
    //字段保存
    fieldsave(){
       if (!this.addfieldparam.field) {
        this.$message({
          showClose: true,
          message: "字段不能为空",
          type: "warning"
        });
        return;
      }
        if (!this.addfieldparam.name) {
        this.$message({
          showClose: true,
          message: "名称不能为空",
          type: "warning"
        });
        return;
      }
       if (!this.addfieldparam.class) {
        this.$message({
          showClose: true,
          message: "类型不能为空",
          type: "warning"
        });
        return;
      }
        if(!this.addfieldparam.type){
             this.$message({
          showClose: true,
          message: "输入类型不能为空",
          type: "warning"
        });
        return;
       }
        if(!this.addfieldparam.long){
             this.$message({
          showClose: true,
          message: "长度不能为空",
          type: "warning"
        });
        return;
       }
       if(this.addfieldparam.type==2){
         if(!this.addfieldparam.forgen_field){
             this.$message({
          showClose: true,
          message: "关联字段不能为空",
          type: "warning"
        });
        return;
         }
       }
      
    // return
    if(this.fieldtype==1){
 addField(this.addfieldparam).then(res=>{
      if(res.code==200){
        this.fieldpage=1
        this.fieldname=''
        this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
        })
        this.setfield()
        this.getfieldList()
         this.setlist()
      }
    })
    }else{
      var data={
        id:this.fieldID,
        param:this.addfieldparam
      }
      setFieldInfo(data).then(res=>{
        if(res.code==200){
          this.fieldpage=1
        this.fieldname=''
        this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
        })
        this.setfield()
        this.getfieldList()
        }
      })
    }
   
    },
    addfield() {
      this.fieldtitle = "添加字段";
      this.fieldtype=1
      this.setfield();
    },
    seachfield() {
      this.fieldpage = 1;
      this.filenam = "";
      this.getfieldList();
    },
    //获取字段列表
    getfieldList() {
      let data = {
        page: this.fieldpage,
        per: 10,
        search_word: this.fieldname
      };
      fieldList(data).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.allfield=res.data.total
          this.fieldpage=res.data.current_page
          this.tableData.forEach(element => {
            element.created_at=SETDATE(element.created_at)
          });
        }
      });
    },
    //字段列表页数改变
    changepagefiled(e) {
      this.fieldpage = e;
      this.getfieldList();
    },
    //媒介保存
    addMJ() {
      if (!this.mj_name) {
        this.$message({
          showClose: true,
          message: "媒介名称不能为空",
          type: "warning"
        });
        return;
      }
      if (this.checkedCities < 1) {
        this.$message({
          showClose: true,
          message: "字段选择不能为空",
          type: "warning"
        });
        return;
      }
      let data = {
        media_name: this.mj_name,
        name_id: this.checkedCities,
        table_name:this.media_en
      };
      // editsavemedia
      if(this.MJ_type==1){
 addMedia(data).then(res => {
        if (res.code == 200) {
          this.mediapage = 1;
         
          this.checkedCities = [];
         
          this.SearchWord = "";
           this.mj_name = "";
          this.setstatus();
          this.getmediaList();
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
        }
      });
      }else{
       
        editsavemedia({id:this.Media_id,data:data}).then(res=>{
          if(res.code==200){
             
          this.mediapage = 1;
         
          this.checkedCities = [];
         
          this.SearchWord = "";
           this.mj_name = "";
          this.setstatus();
          this.getmediaList();
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
        
          }
        })
      }
     
    },
    //
    clearinput(){
  this.addfieldparam.field=''
          this.addfieldparam.name=''
          this.addfieldparam.class=''
          this.addfieldparam.long=''
          this.addfieldparam.forgen_field=''
          this.addfieldparam.input_class=''
          this.addfieldparam.base_field=''
          this.addfieldparam.condition=''
          this.addfieldparam.remark=''
    },
    //点击新建媒介
    addMJshow() {
      this.mediatitle = "新建媒介";
      this.MJ_type=1
      this.setstatus();
    },
    
    //修改媒介时的字段列表
    setlist() {
      let data = {
        page: 1,
        per: 9999999
      };
      fieldList(data).then(res => {
        if ((res.code = 200)) {
          this.m_fieldlist = res.data.data;
        }
      });
    },
    //根据关键字搜索媒介列表
    seachmia() {
      this.mediapage = 1;
      this.getmediaList();
    },
    //获取媒介列表
    getmediaList() {
      let data = {
        per: 10,
        page: this.mediapage,
        table_name: this.SearchWord
      };
      mediaList(data).then(res => {
        if (res.code == 200) {
          this.mediapage = res.data.current_page;
          this.mediasize = res.data.total;
          this.medialist = res.data.data;
          this.medialist.forEach(element => {
            element.created_at = SETDATE(element.created_at);
          });
          this.table_list=res.data.mediums
          //第一次进入页面是关键字默认第一个
          if(this.table_list.length>0 && this.createdSATATUS){
            this.SearchWord=this.table_list[0].table_name
            this.createdSATATUS=false
          }
        }
      });
    },
    setfield() {
      if(this.field){
  this.clearinput()
      }
      this.field = !this.field;
     
    },
    setstatus() {
      if(this.addstatus){
        this.mj_name=''
        this.media_en=''
        this.checkedCities=[]
      }
      this.addstatus = !this.addstatus;
     
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.mediapage = val;
      this.getmediaList();
    },
    handleCheckAllChange(val) {
      var a = [];
      this.m_fieldlist.forEach(element => {
        a.push(element.id);
      });
      this.checkedCities = val ? a : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.m_fieldlist.length;
      // console.log(this.checkAll)
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.m_fieldlist.length;
    }
  }
};
</script>
<style lang="scss" scoped >
.warp {
  width: 97%;
  margin: 0 auto;
}
.headers {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 30px;
}

.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.left {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1;
}
.block {
  margin-top: 20px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.warpprop {
  width: 600px;
  height: 420px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.info {
  width: 550px;
  margin: 0 auto;
}
.topinfo {
  display: flex;
  align-items: center;
}
.topinfo p {
  margin-right: 20px;
  width: 110px;
}
.infoitems {
  width: 100%;
  display: flex;
  height: 250px;
  overflow-y: auto;
  flex-direction: column;
}
.title {
  height: 30px;
  line-height: 30px;
}
.select /deep/ .el-checkbox {
  margin: 5px 7px;
}
.select /deep/ .el-radio {
  margin: 10px 7px;
}
.closeand {
  width: 200px;
  display: flex;
  justify-content: space-between;
}
.closeand {
  margin: 0 auto;
  margin-top: 30px;
}
.infolist {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .infoitem {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .itemname {
      width: 90px;
      font-size: 14px;
    }
  }
}
.line{
  margin-bottom: 100px;
}
.betext {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 20px;
  .textname {
    width: 100px;
  }
}
</style>